<template>
  <div>
    <div class="login" v-loading="loading">
      <div class="middle">
        <div class="left"></div>
        <div class="right">
          <div class="title">欢迎使用中健荟通管理系统</div>
          <div class="entitle">商家版</div>
          <el-form
            :model="loginForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="" prop="username">
              <el-input
                v-model="loginForm.username"
                placeholder="用户名/邮箱地址"
              ></el-input>
            </el-form-item>
            <el-row class="validate_code">
              <el-col :span="15">
                <el-form-item label="" prop="code">
                  <el-input
                    oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
                    v-model="loginForm.code"
                    placeholder="验证码"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="9">
                <div class="r_code">
                  <div
                    @click="handleValidate"
                    v-if="isShow"
                    class="hand_cs validate"
                  >
                    获取验证码
                  </div>
                  <div v-else class="hand_cs validate1">
                    <span> {{ countdown }}</span> s后获取
                  </div>
                </div>
              </el-col>
            </el-row>

            <div class="submit">
              <el-button
                type="primary"
                @keyup.enter="handleSubmit"
                @click="handleSubmit"
                >登录</el-button
              >
              <!-- <div class="register_merchant hand_cs" @click="handleRegiter">
                注册商家
              </div> -->
            </div>
          </el-form>
        </div>
      </div>
      <!-- 注册商家 -->
      <el-dialog
        class="Dialog"
        title="商家注册"
        :visible.sync="dialogVisible"
        width="800px"
        :close-on-click-modal="false"
      >
        <Dialog v-if="dialogVisible" @handleClose="handleClose"></Dialog>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Dialog from "./regitser_merchant.vue";
import { userLogin, getcode } from "@/api/login";
export default {
  components: { Dialog },
  data() {
    return {
      loading: false,
      loginForm: {
        username: "",
        code: "",
        code: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
      dialogVisible: false,
      countdown: 60,
      isShow: true,
      timer: null,
    };
  },
  methods: {
    async userLogin() {
      const { data, err, msg } = await userLogin({
        username: this.loginForm.username,
        // pass: md5(this.loginForm.psw),
        code: this.loginForm.code,
      });
      if (err === 0) {
        sessionStorage.setItem("token", data.token);
        sessionStorage.setItem("username", data.name);
        sessionStorage.setItem("expire_time", data.expire_time);
        this.$message({
          showClose: true,
          message: "登录成功！",
          type: "success",
        });
        this.$router.push("/");
      } else {
        this.loading = false;
        this.$message({
          showClose: true,
          message: msg,
          type: "error",
        });
      }
    },
    async getcode() {
      const { data, err } = await getcode({
        phone: this.loginForm.username,
        type: 8,
      });
      if (err === 0) {
        //
      }
    },
    //点击验证码
    handleValidate() {
      if (this.loginForm.username === "") {
        this.$message({
          showClose: true,
          message: "请输入手机号",
          type: "error",
        });
      } else {
        this.isShow = false;
        this.getcode();
        this.timer = setInterval(() => {
          this.countdown--;
          if (this.countdown === 0) {
            this.isShow = true;
            clearInterval(this.timer);
            this.timer = null;
            this.countdown = 60;
            return;
          }
        }, 1000);
      }
    },
    handleSubmit() {
      //验证
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.userLogin();
        } else {
          return false;
        }
      });
      //登录进行二维码验证
    },
    handleRegiter() {
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    // // 点击回车键登录
    keyDown(e) {
      // 回车则执行登录方法 enter键的ASCII是13
      if (e.keyCode === 13) {
        this.handleSubmit(); // 定义的登录方法
      }
    },
  },
  created() {
    sessionStorage.clear();
  },
  mounted() {
    // 绑定监听事件
    window.addEventListener("keydown", this.keyDown);
  },
  destroyed() {
    // 销毁事件
    window.removeEventListener("keydown", this.keyDown, false); //销毁回车事件，如果不销毁，在其他页面敲回车也会执行回车登录操作。
  },
};
</script>

<style lang="scss" scoped>
@import "@/style/index.scss";
.login {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("@/assets/bg.png") no-repeat;
  background-size: 100% 100%;
  background-position: 100% 100%;
  .middle {
    width: 50%;
    height: 55%;
    display: flex;
    box-shadow: 0px 0px 35px 0px rgba(10, 109, 217, 0.14);
    border-radius: 4px;
    background-color: #fff;
    .left {
      width: 48%;
      height: 100%;
      background: url("@/assets/left.png") no-repeat;
      background-size: 100% 100%;
      background-position: 100% 100%;
      background-color: #f2f7fd;
      border-radius: 4px 0 0 4px;
    }
    .right {
      flex: 1;
      padding: 0 60px;
      box-sizing: border-box;
      //   margin-left: 100px;
      .forgetPsw {
        font-size: 12px;
        margin-top: 20px;
      }
      .content {
        margin: 0 auto;
      }
      .title {
        text-align: left;
        padding-top: 30px;
        box-sizing: border-box;
        font-size: 20px;
        color: #333333;
      }
      .entitle {
        font-weight: bold;
        text-align: start;
        font-size: 16px;
        margin: 20px 0;
      }
      .demo-ruleForm {
        margin-top: 55px;
      }
      .el-form-item__label {
        width: 100%;
      }
      /deep/.el-form-item__label {
        width: 100% !important;
        text-align: start !important;
      }
      /deep/.el-form-item__content {
        margin-left: 0 !important;
      }
      .submit {
        text-align: start;
        .el-button {
          width: 100%;
        }
      }
      .el-button {
        padding: 12px 50px;
      }
      .el-form-item {
        margin-bottom: 22px;
      }
    }
  }
}
.process {
  margin: 30px 0 0;
}

.register_merchant {
  margin-top: 10px;
  color: $color-primary1;
}
.Dialog {
  /deep/.el-dialog {
    height: 82%;
    margin-top: 10vh !important;
    .el-dialog__body {
      height: 80%;
      overflow: auto;
    }
  }
}
.validate_code {
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  .r_code {
    padding-left: 20px;
    box-sizing: border-box;
  }
  /deep/.el-form-item {
    margin-bottom: 0 !important;
  }
  .validate {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    background-color: $color-primary1;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    &:hover {
      opacity: 0.8;
    }
  }
  .validate1 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    background-color: $color-primary1;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    opacity: 0.5;
    span {
      font-size: 16px;
    }
  }
}
</style>
